import { defineComponent, PropType, ref, watchEffect } from 'vue'

import styles from './style.module.scss'

export default defineComponent({
  name: 'ProgressBar',
  emits: ['change'],
  props: {
    percent: {
      type: Number as PropType<number>,
      required: true,
    },
  },
  setup(props, { emit }) {
    const percents = ref(0)
    const handleChange = (val: number) => {
      emit('change', val)
    }
    watchEffect(() => {
      percents.value = props.percent
    })
    return () => {
      return (
        <>
          <div class={styles.progressBar}>
            <el-slider v-model={percents.value} max={1} step={0.01} show-tooltip={false} onChange={handleChange}></el-slider>
          </div>
        </>
      )
    }
  },
})
